<template>
	<view>
		<view class="canvas">
			<canvas :style="'width:'+width+'rpx;height:'+height+'rpx'" canvas-id="firstCanvas"></canvas>
		</view>
		<view class="button">
			<u-button class="b1" @click="copyText">复制文案</u-button>
			<u-button class="b2" @click="save_but">保存海报</u-button>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				width: 0,
				height: 0,
				w: 0,
				h: 0,
				daytime: [],
				writing: "",
				icon:"",
				list: ['x', 'Jan', 'Feb', 'Jan', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ]
			}
		},
		onLoad(option) {
			than = this;
		},
		onReady (){
			try {
				const res = uni.getSystemInfoSync();
				than.w = than.mul(res.safeArea.width, 2);
				than.h = than.mul(res.safeArea.height, 2);
				than.width = than.div(than.w, 1.275);
				than.height = than.div(than.h, 1.276);
			} catch (e) {
				// error
			}
			than.post("api/share/everyDayShare", null, function(data) {
				var a = than.$u.timeFormat(data.daytime, 'yyyy-mm-dd');
				than.writing = data.writing;
				than.daytime = a.split('-');
				than.icon=data.icon;
				than.copyFn()
			})
		},
		methods: {
			copyFn() {
				let _this = this
				let w, h;
				let context = uni.createCanvasContext('firstCanvas') //绑定画布			
				context.drawImage('../static/day0.png', 0, 0, than.width / 2, than.height / 2)
				context.drawImage(than.img_pre+than.icon, 0, 0, than.width / 2, than.width / 2)
				context.drawImage('../static/day2.png', than.div(than.div(than.w,2), 20), than.div(than.div(than.w,2), 1.20),
					than.div(
						than.w, 2.1) / 2, than.div(than.h, 11.4) / 2)
				context.setFontSize(18);
				context.setFillStyle('#333333')
				context.fillText(than.daytime[2], than.div(than.div(than.w,2), 1.50), than.div(than.div(than.w,2), 1.12));
				context.setFontSize(9);
				context.fillText(than.list[parseInt(than.daytime[1])] + ' ' + than.daytime[0], than.div(than.div(than.w,2), 1.63),
					than.div(than.div(than.w,2), 1.08))
				context.setFontSize(14);
				context.setFillStyle('#666666')
				than.drawText(context, than.writing,than.div(than.div(than.w,2), 20), than.div(than.div(than.w,2), 0.95), 0,
					 than.div(than.div(than.w,2), 1.55))
				context.draw()
			},
			drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
				let lineWidth = 0;
				let lastSubStrIndex = 0;
				for (let i = 0; i < str.length; i++) {
					lineWidth += ctx.measureText(str[i]).width;
					if (lineWidth > canvasWidth) {
						ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
						initHeight += 22;
						lineWidth = 0;
						lastSubStrIndex = i;
						titleHeight += 22;
					}
					if (i == str.length - 1) {
						ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
					}
				}
				titleHeight = titleHeight + 10;
				return titleHeight;
			},
			copyText() {
				uni.setClipboardData({
					data: than.writing,
					success: function(res) {
						than.toast("复制成功")
					}
				});
			},
			save_but() {
				uni.showLoading();
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						than.download(res.tempFilePath)
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FCEAC6;
	}

	.canvas {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
	}

	.button {
		display: flex;
		align-items: center;
		padding: 0 90rpx;

		.b1 {
			width: 245rpx;
			height: 74rpx;
			background: #FDEEE9;
			border: 1rpx solid #FB683D;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FB683D;
		}

		.b2 {
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
